import React from 'react';

interface CircularProgressProps {
  onClick?: () => void;
  className?: string;
  percentage?: number;
  color?: string;
  radius?: number;
  text?: string;
}

const CircularProgress: React.FC<CircularProgressProps> = ({
  onClick = () => {},
  className = "flex justify-center items-center",
  percentage = 10,
  color = 'blue',
  radius = 50, // 通过 props 传递 radius，默认值为 50
  text
}) => {
  const circumference = 2 * Math.PI * radius;
  const strokePercentage = ((100 - percentage) / 100) * circumference;

  // 计算 SVG 容器大小和圆的中心点，确保圆完全在视图内
  const svgSize = radius * 2 + 20;  // 加20像素确保有足够空间显示stroke
  const center = svgSize / 2;

  // 如果 text 没有被传入，使用 percentage 的百分比表示
  const displayText = percentage !== 0 ? `${percentage}%` : text;

  return (
    <div className={className} onClick={onClick}>
      <svg width={svgSize} height={svgSize}>
        <circle
          cx={center}
          cy={center}
          r={radius}
          fill="none"
          stroke="#eee"
          strokeWidth="10"
        />
        <circle
          cx={center}
          cy={center}
          r={radius}
          fill="none"
          stroke={color}
          strokeWidth="10"
          strokeDasharray={circumference}
          strokeDashoffset={strokePercentage}
          transform={`rotate(-90 ${center} ${center})`}
        />
        <text x={center} y={center} fill="black" fontSize="20" dy=".3em" textAnchor="middle">
          {displayText}
        </text>
      </svg>
    </div>
  );
};

export default CircularProgress;
